<template>
    <div class="flex items-center mt-[10px] px-[40px] gap-x-[40px]">
        <Overview :data="datas?.analysis_overview" @change="getData" />
        <!-- <AnalysisProject :data="datas.analysis_projects"/> -->
        <AnalysisProject :loading="loading" :data="datas.analysis_projects" @click="clickItem" />
    </div>
</template>
<script setup lang="ts">
import Overview from './Overview/index.vue';
import AnalysisProject from './AnalysisProject/index.vue';

import { apiGetAnalysisStatistic } from '@/http/api';
import { iAnalysisStatistic } from '@/interface/iAnalysisStatistic';
const emit = defineEmits<{ (event: 'change', days: number): void; (event: 'click', data: any): void }>();

const datas = ref<iAnalysisStatistic>({
    analysis_overview: { total_cnt: 0, abnormal_cnt: 0 },
    analysis_projects: [],
});
const loading = ref(false);
const getData = async (days: number) => {
    emit('change', days);
    try {
        loading.value = true;
        const res = await apiGetAnalysisStatistic(days);
        datas.value = res.data;
    } catch (error) {
    } finally {
        loading.value = false;
    }
};
const clickItem = (item: any) => {
    emit('click', item);
};
// onBeforeMount(() => {
//   getData();
// });
</script>
<style lang="scss" scoped></style>
